<template>
  <router-view/>
  <SuspendedBallChat
      v-if="!isLoginPage"
      :url="apiUrl"
      :app-name="appName"
      :assistant-config="assistantConfig"
      :welcome-config="welcomeConfig"
      :enable-voice-input="false"
      :enable-context="true"
      :enable-local-storage="false"
      :enable-streaming="true"
      :preset-tasks=presetTasks
      :callbacks="callbacks"
      :sendMessage="sendAIMessage"
      :custom-request-config="{
        headers: {
          'Content-Type': 'application/json',
        },
        customParams: {
        'question': question
    },
      }"
  />

</template>

<script setup>
import {SuspendedBallChat} from 'ai-suspended-ball-chat'
import useSettingsStore from '@/store/modules/settings'
import {handleThemeStyle} from '@/utils/theme'
import {computed, nextTick, onMounted, ref} from "vue";
import {useRoute} from "vue-router";
// 获取当前路由信息
const route = useRoute()
// 计算属性判断是否为登录页面
const isLoginPage = computed(() => {
  return route.path === '/login'
})
const apiUrl = ref('http://127.0.0.1:8038/ai')
const appName = ref('竞赛管理系统')
let question = ref('')
const welcomeConfig = {
  title: '欢迎使用竞赛管理AI助手',
  description: '您好！我是您的专属AI助手，可以帮您快速了解竞赛规则、解答参赛疑问、协助赛事组织与管理等工作。请随时告诉我您需要什么帮助！',
  // avatar: 'https://example.com/avatar.png'  // 悬浮窗头像
}
const presetTasks = [
  {
    icon: '💡',
    title: '比赛推荐',
    description: '根据您你的技术栈来,帮助分析适合的竞赛项目'
  },
  {
    icon: '📊',
    title: '数据分析',
    description: '根据过往的比赛数据，给出项目建议'
  },
  {
    icon: '🔧',
    title: '技术支持',
    description: '提供技术问题和编程帮助'
  }
]
const assistantConfig = {
  // avatar: 'https://example.com/assistant-avatar.png',
  name: '智能助手 yirc99',
  description: '您的专属AI助手 yirc99'
}



const callbacks = {
  // 用户发送消息时触发
  onUserMessage: (message) => {
    question.value = message
    console.log('用户消息:', message)
  },

  // AI回复时触发
  onAssistantMessage: (message) => {
    console.log('AI回复:', message)
  },

  // 流式响应开始
  onStreamStart: () => {
    console.log('开始流式响应')
  },

  // 流式响应进行中
  onStreamProgress: (partialMessage) => {
    console.log('流式响应进度:', partialMessage)
  },

  // 流式响应结束
  onStreamEnd: (fullMessage) => {
    console.log('流式响应结束:', fullMessage)
  },
  onStreamData: (x) => {
    // console.log("流式数据1:", x);
  },

  // 发生错误时触发
  onError: (error) => {
    console.error('错误:', error)
  },

  onRequestEnd: (x) => {
    console.error('请求结束:', x)
  },

  // 历史记录加载时触发
  onHistoryLoad: (history) => {
    console.log('历史记录:', history)
  },

  // 历史记录保存时触发
  onHistorySave: (history) => {
    console.log('保存历史记录:', history)
  },

  // 点击AI助理消息"插入含义"按钮时触发
  clickAssistantMsgCallback: (message, index, messageObj) => {
    console.log('插入含义:', {message, index, messageObj})
  }
}



// callbacks 可以使用 reactive 或普通对象
onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
  })
})

</script>
